<script setup lang="ts">
import { ref, shallowRef } from 'vue'
import { type ComponentOptions, ScrollView } from '@/widgets'
import type { MapItemInfo } from '../types'
import { getMapItemInfoViews } from '../base'
import {
  selectedCenter,
  useListenMapItemSelected,
  locateSelected,
  selectBack,
  selectForward
} from './core'

const title = ref<string>('当前无选中对象')
const icon = ref<string | null>(null)
const components = shallowRef<Required<ComponentOptions>[] | null>(null)
const locatable = ref<boolean>(false)

const sv = ref<InstanceType<typeof ScrollView>>()

function onMapItemSelected(item: MapItemInfo<any> | null) {
  if (!item) {
    title.value = '当前无选中对象'
    icon.value = null
    components.value = null
    locatable.value = false
    return
  }
  sv.value?.scrollTop(0)
  title.value = `${item.typeName} | ${item.name}`
  icon.value = item.icon || null
  components.value = getMapItemInfoViews(item)
  locatable.value = selectedCenter != null
}

useListenMapItemSelected(onMapItemSelected)
</script>
<template>
  <div class="selected-map-item-info-view map-pane">
    <div class="pane-heading">
      <div class="pane-title">
        <i :class="icon" v-if="icon != null" />
        {{ title }}
      </div>
      <div class="pane-tool">
        <i class="mas-icon-select" @click="locateSelected" v-if="locatable" />
        <i class="mas-icon-back" @click="selectBack(true)" />
        <i class="mas-icon-next" @click="selectForward(true)" />
      </div>
    </div>
    <ScrollView ref="sv">
      <div class="info-view-content">
        <template v-if="components">
          <component
            v-for="cmp in components"
            :key="cmp.key"
            :is="cmp.component"
            v-bind="cmp.props"
            v-on="cmp.events"
          />
        </template>
      </div>
    </ScrollView>
  </div>
</template>
<style lang="scss">
@import '@/map/style/var';
.selected-map-item-info-view {
  .pane-title {
    padding-right: 1em;
  }
  .scroll-view {
    max-height: 40em;
  }
  .info-view-content {
    min-width: 20em;
    min-height: 5em;
  }
  .locate-btn {
    cursor: pointer;
    &:hover {
      border-bottom: 1px solid $map-fg;
    }
  }
}
</style>
